<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>4-6</title>
  <script src='vue2/vue.js'></script>
</head>
<!-- 
slot 当做占位符
slot里面可以写默认值
 -->
<body>
  <div id="root">
    <child-content>
      <div class="header" slot="header">hanrong</div>
      <div class="footer" slot="footer">hanlin</div>
    </child-content> 
  </div>
  <script>
    Vue.component('child-content', {
      template: `<div>
                  <slot name="header"></slot>
                  <div>hanfei<div>
                  <slot name="footer"></slot>
                </div>`,
    })
    var vm = new Vue({
      el: "#root",
      methods:{
      }
    })
  </script>
</body>

</html>